<template>
  <div class="map-container">
    <div>
      <el-card style="margin-left: 150px;margin-right: 150px;margin-top: 20px;">
        <div class="chart-container">
          <div id="chartPie" style="width:100%; height:550px;"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
      return {
        chartPie: '',
        typeName: [], //帖子类型名称
        typeNum: [], //帖子类型数量
      }
    },
    methods: {
      drawPieChart() {
        this.chartPie = this.$echarts.init(document.getElementById("chartPie"));
        this.chartPie.setOption({
          //设置标题,副标题,以及标题位置居中
          title: {
            text: '帖子统计(饼状图)',
            //subtext: '纯属虚构',
            x: 'center'
          },
          //具体点击某一项触发的样式内容
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          //左上侧分类条形符
          legend: {
            orient: 'vertical',
            left: 'left',
            data: []
          },
          //饼状图类型以及数据源
          series: [{
            name: '统计数量',
            type: 'pie',
            data: [],
            //设置饼状图扇形区域的样式
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          }]
        });
      },
      //动态获取饼状图的数据
      async initData() {
        axios.get("http://127.0.0.1/list/all").then(response => {
          var getData = [];
          //先进行赋值
          for (let i = 0; i < response.data.target.length; i++) {
            var obj = new Object();
            obj.name = response.data.target[i].name;//名称
            obj.tel = response.data.target[i].tel;//数量
            getData[i] = obj;
          }
          this.chartPie.setOption({
            legend: {
              data: response.data.target.name,
            },
            series: [{
              data: getData,
            }]
          });
        })

      },
      drawCharts() {
        this.drawPieChart();
      },
    },
    mounted() {
      this.initData();
      this.drawCharts();
    }

}
</script>
<style lang="scss" scoped>
.map-container{
  width: 100%;
  height: 100%;
  .charts-box{
    width: 100%;
    height: 100%;
    .echarts {
      width: 100%;
      height: 100%;
    }
  }
}

</style>